<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>宜佳佳,迎新春</title>
<link rel="Shortcut Icon" href="<%=request.getContextPath() %>/js/yjj_ui1/lloo.jpg" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/yjj_ui10/css/style.css" />
</head>
<body class="keBody">
<h1 class="keTitle">宜佳佳喜气洋洋,迎新春活动</h1>
<div class="kePublic">
<!--效果html开始-->
<div class="rotary">
	<div class="rotaryArrow" id="rotaryArrow"></div>
	<div class="list">
		<h3>中奖名单</h3>
		<ul>
			<li><a href="" style="color:#ffea76;">兰可儿</a></li>
			<li>1569****851</li>
			<li>1515****206</li>
			<li>1550****789</li>
			<li>1370****627</li>
			<li>1828****215</li>
			<li>1589****572</li>
			<li>1583****825</li>
			<li>1396****805</li>
			<li>1332****261</li>
			<li>1884****863</li>
			<li>1384****955</li>
			<li>1897****137</li>
			<li>1342****973</li>
			<li>1558****071</li>
			<li>1554****168</li>
			<li>1562****018</li>
			<li>1805****856</li>
			<li>1354****809</li>
			<li>1383****364</li>
		</ul>
	</div>
	<div class="result" id="result">
		<p id="resultTxt"></p>
		<a href="javascript:" id="resultBtn" title="关闭">关闭</a>
	</div>
</div>


<script type="text/javascript" src="<%=request.getContextPath() %>/js/yjj_ui10/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/yjj_ui10/js/jquery.rotate.min.js"></script>
<script type="text/javascript">
$(function(){
	var $rotaryArrow = $('#rotaryArrow');
	var $result = $('#result');
	var $resultTxt = $('#resultTxt');
	var $resultBtn = $('#result');

	$rotaryArrow.click(function(){
		var data = [0, 1, 2, 3, 4, 5, 6, 7];
		data = data[Math.floor(Math.random()*data.length)];
		switch(data){
			case 1: 
				rotateFunc(1,87,'恭喜您获得了 <em>1</em> 元代金券');
				break;
			case 2: 
				rotateFunc(2,43,'恭喜您获得了 <em>5</em> 元代金券');
				break;
			case 3: 
				rotateFunc(3,134,'恭喜您获得了 <em>10</em> 元代金券');
				break;
			case 4: 
				rotateFunc(4,177,'很遗憾，这次您未抽中奖，继续加油吧');
				break;
			case 5: 
				rotateFunc(5,223,'恭喜您获得了 <em>20</em> 元代金券');
				break;
			case 6: 
				rotateFunc(6,268,'恭喜您获得了 <em>50</em> 元代金券');
				break;
			case 7: 
				rotateFunc(7,316,'恭喜您获得了 <em>30</em> 元代金券');
				break;
			default:
				rotateFunc(0,0,'很遗憾，这次您未抽中奖，继续加油吧');
		}
	});

	var rotateFunc = function(awards,angle,text){  //awards:奖项，angle:奖项对应的角度
		$rotaryArrow.stopRotate();
		$rotaryArrow.rotate({
			angle: 0,
			duration: 5000,
			animateTo: angle + 1440,  //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈
			callback: function(){
				$resultTxt.html(text);
				$result.show();
			}
		});
	};

	$resultBtn.click(function(){
		$result.hide();
	});
});
</script>
<!--效果html结束-->
<div class="clear"></div>
</div>
<div class="keBottom">
<p class="keTxtP">宜佳佳公司荣誉出品 <a class="keUrl" href="www.yijiajiao.com" target="_blank">www.yijiajiao.com</a></p>
<p class="keTxtP">本站导航：
<a href="" target="_blank" class="cor_bs">网站建设</a> | 
<a href="" target="_blank" class="cor_bs">网页素材</a> | 
<a href="" target="_blank" class="cor_bs">网页特效</a> | 
<a href="" target="_blank" class="cor_bs">设计分享</a> | 
<a href="" target="_blank" class="cor_bs">建站教程</a> | 
<a href="" target="_blank" class="cor_bs">网站模版</a> | 
<a href="" target="_blank" class="cor_bs">酷站赏析</a>
</p>
<p class="keTxtP">＊尊重他人劳动成果，转载请自觉注明出处！注：此版权为宜佳佳所有，请勿用于商业用途。
<a target="_blank" href="" class="button red" title="北京网站建设,网页特效QQ交流群-科e互联">加入QQ交流群</a></p>
</div>
</body>
</html>